<!--
 * @Author: lihaogn
 * @Date: 2021-12-16 11:41:00
 * @LastEditTime: 2021-12-23 14:44:23
 * @LastEditor: lihaogn
 * @Description: 分配权限抽屉
 * @FilePath: \lix-admin-vue2\src\views\system\user-manage\role-list\modules\OfferPermissionDrawer.vue
-->
<template>
  <el-drawer
    title="分配权限"
    :visible.sync="drawerVisible"
    :size="500"
    @close="handleDrawerClose"
  >
    <div class="gl-drawer-body" v-loading="loading">
      <div class="gl-drawer-main">
        <el-tree
          ref="permissionTreeRef"
          :props="props"
          :data="treeData"
          node-key="id"
          show-checkbox
          :default-checked-keys="defaultCheckedKeys"
          @check="handleCheck"
        >
        </el-tree>
      </div>
      <div class="gl-drawer-footer-btn">
        <el-button type="primary" @click="handleDrawerOk">确定</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import { reqGetPermissionList } from '../../../../../api/user-manage/permission/api'
import { reqUpdateRole } from '../../../../../api/user-manage/role/api'
import { drawerMixin } from '../../../../../mixins/drawer'

export default {
  mixins: [drawerMixin],
  data() {
    return {
      props: {
        label: 'name',
        children: 'children'
      },
      treeData: [],
      defaultCheckedKeys: [],
      checkedObject: []
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.drawerVisible = val

        this.defaultCheckedKeys = this.drawerData.permission.map(x => x.id)
        this.getPermissions()
      } else {
        this.checkedObject = []
      }
    }
  },
  methods: {
    /**
     * @author: lihaogn
     * @Date: 2021-12-20 21:11:20
     * @description: 获取所有权限
     * @param {*}
     * @return {*}
     */
    async getPermissions() {
      this.loading = true
      const res = await reqGetPermissionList()
      if (res.success) {
        this.treeData = res.result
      }
      this.loading = false
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-20 21:27:12
     * @description:
     * @param {*} data - 当前点击的对象
     * @param {*} checkedObj - 选中的对象
     *  {
     *    checkedKeys - 选中的对象的keys
     *    checkedNodes - 选中的对象们
     *    halfCheckedKeys - 半选的。。。
     *    halfCheckedNodes - 半选的。。。
     *  }
     * @return {*}
     */
    handleCheck(data, checkedObj) {
      this.checkedObject = [
        ...checkedObj.checkedKeys,
        ...checkedObj.halfCheckedKeys
      ]
    },
    handleDrawerClose() {
      this.$emit('update:visible', false)
    },
    /**
     * @author: lihaogn
     * @Date: 2021-12-21 17:04:41
     * @description: 确定按钮-分配权限
     * @param {*}
     * @return {*}
     */

    async handleDrawerOk() {
      const res = await reqUpdateRole(this.drawerData.id, {
        keys: this.checkedObject.length
          ? this.checkedObject
          : this.$refs['permissionTreeRef'].getCheckedKeys(),
        type: 'UPDATE_PERMISSION'
      })
      if (res.success) {
        this.$message.success(res.message + '，重新登录后生效')
        this.drawerVisible = false
        this.$emit('ok')
      }
    }
  }
}
</script>
<style lang="less" scoped></style>
